import React, { useState, useEffect, useCallback, useMemo, memo } from "react";
import { useNavigate } from "react-router-dom";
import language from "@/lang/zh";
import emitter from '../bus.js'; 

import file from "@/assets/new_home/file.png";
import fileSelect from "@/assets/new_home/file-select.png";
import robat from "@/assets/new_home/robat.png";
import robatSelect from "@/assets/new_home/robat-select.png";
import agent from "@/assets/new_home/agent.png";
import agentSelect from "@/assets/new_home/agent-select.png";
import more from "@/assets/new_home/more.png";
import photo from "@/assets/new_home/photo.png";
import setting from "@/assets/new_home/setting.png";
const NavigationBar = memo(({ Lang, isDisabled, handChange }) => {
  const [selectedIndex, setSelectedIndex] = useState(1);
  
  const navigate = useNavigate();
  
  const menuItems = useMemo(() => [
    {
      icon: file,
      selectedIcon: fileSelect,
      title: "文档库",
      route: '/home/file'
    },
    {
      icon: robat,
      selectedIcon: robatSelect,
      title: 'SmartOffice+',
      route: '/home'
    },
    {
      icon: agent,
      selectedIcon: agentSelect,
      title: '智能体',
      route: '/home/square'
    },
  ], []);
  
  const isForbidden = useCallback(() => {
    return Boolean(isDisabled);
  }, [isDisabled]);
  
  const handleMessage = useCallback((data) => {
    if (data && typeof data.index === 'number') {
      setSelectedIndex(data.index);
    }
  }, []);
  
  const handleClick = useCallback((index, route) => {
    if (isForbidden()) return;
    
    setSelectedIndex(index);
    handChange(index);
    navigate(route);
  }, [isForbidden, handChange, navigate]);
  
  useEffect(() => {
    emitter.on('message', handleMessage);
    
    return () => {
      emitter.off('message', handleMessage);
    };
  }, [handleMessage]);
  
  return (
    <div className="sidebar-container">
      <div className="sidebar">
        <div className="sidebar-links">
          <div className="more-nav"> 
            <img src={more} />
          </div>
          {menuItems.map((item, index) => (
            <div
              key={index}
              className={`nav-item ${selectedIndex === index ? 'selected' : ''}`}
              onClick={() => handleClick(index, item.route)}
            >
              <div className="icon-container">
                <img 
                  src={selectedIndex === index ? item.selectedIcon : item.icon} 
                  alt={item.title} 
                />
              </div>
              <div className="nav-title">{item.title}</div>
            </div>
          ))}
        </div>
        
        {/* Bottom icons */}
        <div className="bottom-icons">
          <div className="nav-item-bottom">
            <div className="icon-container">
              <img src={setting} alt="设置" />
            </div>
          </div>
          <div className="nav-item-bottom">
            <div className="icon-container profile-photo">
              <img src={photo} alt="头像" />
            </div>
          </div>
        </div>
      </div>
      
      <style jsx="true">{`
        .sidebar-container {
          position: fixed;
          left: 0;
          top: 0;
          height: 100vh;
          width: 94px;
          background-color: #f3f8fd;
          display: flex;
          flex-direction: column;
          border-right: 1px solid rgba(0, 0, 0, 0.05);
        }

        .more-nav{
          margin: 40px 0;
        }
        
        .sidebar {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 20px;
          height: 100%;
          justify-content: space-between;
        }
        
        .sidebar-links {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
        }
        
        .nav-item {
          display: flex;
          flex-direction: column;
          align-items: center;
  
          width: 78px;
          height: 78px;
    justify-content: center;
          margin-bottom: 15px;
          cursor: pointer;
          background: #fff;
          border-radius: 16px;
          z-index: 99;
          transition: all 0.2s ease;
        }
        .nav-item-bottom{
           display: flex;
          flex-direction: column;
          align-items: center;
            width: 100px;
          height: 70px;
          padding-top: 5px;
          margin-bottom: 15px;
          cursor: pointer;
          border-radius: 16px;
          z-index: 99;
          transition: all 0.2s ease;
        }
        .icon-container {
          width: 25px;
          height: 25px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 5px;
        }
        
        .icon-container img {
          width: 24px;
          height: 24px;
          object-fit: contain;
        }

        .bottom-icons {
          margin-bottom: 40px;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
        }

        .bottom-icons .nav-item {
          margin-bottom: 10px;
          height: 50px;
        }

        .profile-photo img {
          width: 45px;
          height: 45px;
          border-radius: 50%;
        }
        
        .nav-title {
          font-size: 12px;
          color: #666;
          text-align: center;
        }
        
        .nav-item.selected .nav-title {
          color: #2196F3;
        }
      `}</style>
    </div>
  );
});

NavigationBar.defaultProps = {
  Lang: false,
  isDisabled: false,
  handChange: () => {}
};

export default NavigationBar;